<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="referrer" content="never">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<style>
</style>

<body class="vsc-initialized">

  <!-- <video src="https://www.bilibili.com/video/av63542235/" controls="controls">
    您的浏览器不支持 video 标签。
    </video> -->

  <div id="drop_area" 
  style="color: #fff;border:3px dashed #fff;width:200px; height:200px;margin: 2.8rem auto;justify-content: center;align-items: center;display: -webkit-flex;">将图片拖拽到此</div>
  <button style="width: 320px;height: 45px;margin: 10px auto;border: none;outline: none;justify-content: center;align-items: center;display: -webkit-flex;" 
  onclick="xhr2()">ajax文件上传</button>
  <div id="tas"></div>

  <script>

    document.addEventListener("drop", function (e) {  // 拖离   
      e.preventDefault();
    })
    document.addEventListener("dragleave", function (e) {  // 拖后放   
      e.preventDefault();
    })
    document.addEventListener("dragenter", function (e) {  // 拖进  
      e.preventDefault();
    })
    document.addEventListener("dragover", function (e) {  // 拖来拖去    
      e.preventDefault();
    })

    var box = document.getElementById('drop_area'); //拖拽区域     
    box.addEventListener("drop", function (e) {
      var fileList = e.dataTransfer.files; // 获取文件对象    
      // 检测是否是拖拽文件到页面的操作            
      if (fileList.length == 0) {
        return false;
      }
      // 拖拉图片到浏览器，可以实现预览功能    
      // 规定视频格式  
      Array.prototype.fCC = String.fromCharCode(2); // 一个或多个 Unicode 值，即要创建的字符串中的字符的 Unicode 编码
      Array.prototype.in_array = function (e) {
        var reg = new RegExp(this.fCC + e + this.fCC);
        return (reg.test(this.fCC + this.join(this.fCC) + this.fCC));
      };
      var video_type = ["video/mp4", "video/ogg"];

      // 创建一个url连接，供src属性引用
      var fileUrl = window.URL.createObjectURL(fileList[0]);
      if (fileList[0].type.indexOf('image') === 0) {  // 如果是图片  
        var str = "<img width='200px' height='200px' src='" + fileUrl + "'>";
        document.getElementById('drop_area').innerHTML = str;
      } else if (video_type.in_array(fileList[0].type)) {   // 如果是规定格式内的视频                    
        var str = "<video width='200px' height='200px' controls='controls' src='" + fileUrl + "'></video>";
        document.getElementById('drop_area').innerHTML = str;
      } else { // 其他格式，输出文件名  
        var str = "文件名字:" + fileList[0].name;
        document.getElementById('drop_area').innerHTML = str;
      }
      resultFile = fileList[0];
      document.getElementById('tas').innerHTML = 'name = ' + resultFile.name + '<br> size = ' + resultFile.size + '<br>type = ' + resultFile.type;
      console.log('resultFile = ' + JSON.stringify(resultFile));
    }, false);

    function xhr2() {
      console.log('2323');
      
      var xhr = new XMLHttpRequest();// 第一步  
      // 新建一个FormData对象  
      var formData = new FormData(); //++++++++++  
      // 追加文件数据  
      formData.append('file', resultFile);
      // post方式  
      xhr.open('POST', 'xhr2.php'); //第二步骤  
      // 发送请求  
      xhr.send(formData);  //第三步骤  
      // ajax返回  
      xhr.onreadystatechange = function () { // 第四步  
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);
        }
      };
      // 设置超时时间  
      xhr.timeout = 10000;
      xhr.ontimeout = function (event) {
        alert('请求超时！');
      }
    }
  </script>

  <!-- <form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form"> 
    <input type="file" id="chooseImage" name="file" style="margin: 1.6rem 2.4rem 0 2.4rem;">
    <img id="showImg" alt="" data-address='' width="840" height="630" style="display: flex;margin: 1.6rem;"/>
  </form>

  <script>
    $('#chooseImage').on('change',function(){
    	var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
    		fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
    		src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
    		
    	// 检查是否是图片
    	if(!fileFormat.match(/.png|.jpg|.jpeg/) ) {
    		error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
        	return;  
        }
        $('#showImg').attr('src',src);
  });
  </script> -->

</body>

</html>